<template>
  <el-container >
    <el-header style="background-color: #409EFF">
      <div style="margin: 18px" > 天韵后台管理系统 </div>
    </el-header>
  </el-container>

  <el-container >
    <el-aside width="180px">
      <div>
        <el-avatar icon="el-icon-user-solid" :size="80" style="margin: 10px"></el-avatar>
        <div class="avatar">账号</div>
      </div>

      <el-menu default-active="1" class="el-menu-vertical-demo" v-bind:router="true">
        <el-menu-item route="/home/studentManage" index="1"> <i class="el-icon-edit"></i> 学生管理 </el-menu-item>
        <el-menu-item route="/home/studentBill" index="2" > <i class="el-icon-menu"></i> 账目管理 </el-menu-item>
        <el-menu-item route="/home/courseManage" index="3" ><i class="el-icon-user"></i> 课程管理 </el-menu-item>
        <el-menu-item route="/home/teacherManage" index="4" ><i class="el-icon-user-solid"></i> 教师管理 </el-menu-item>
        <el-menu-item index="5" @click="logout"><i class="el-icon-switch-button"></i> 退出登录 </el-menu-item>
      </el-menu>
    </el-aside>

    <el-main class="">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
import router from "../router";
import StudentBill from "./BillManage.vue";
export default {
  name: "Home",
  components: {
    StudentBill
  },
  methods: {
    logout() {
      router.push({path: "/"})
    },
    loadStudentBill() {
      router.push({path: "/home/studentBill"})
    }

  }
}
</script>

<style scoped>

.el-container {
  height: 100%;
}

.avatar {
  border-bottom: 1px solid;
  border-bottom-color: white;
  margin: 10px auto 5px auto;
}

body {
  margin: 0;
}
</style>